<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    计算属性:
        1.定义:要用的属性不存在，要通过已有属性计算得来
        2.原理:底层借助了Object.defineproperty方法提供gette和setter
        3.get函数什么时候执行:
            (1).初次读取会执行一次。
            (2).当依赖的数据发生改变时会被再次调用
        4.优势: 与methods实现相比，内部具有缓存机制(复用)，效率更高，调试方便
        5.备注:
            1.计算属性最终会出现在vm上，直接读取使用即可
            2.如果计算属性要被修改，那必须写set函数去响应修改，且set函数要引起依赖的数据发生改变
    -->
    <div id="root">
        姓：<input type="text" v-model:value="firstName" /> <br/><br/>
        名：<input type="text" v-model:value="lastName"/> <br/><br/>
        全名: <span>{{fullName}}</span> <br/>
       
       
        </div>  


    <script>
        const vm = new Vue({
            el:'#root',
            data() {
                return {
                    firstName:"zhang",
                    lastName:'san',
                }
            },
            computed:{
                fullName(){    //不进行写setter ，只进行写get进行简写  -- 具有缓存
                    console.log('方法被调用')
                    return this.firstName+'-'+this.lastName
                },

                /*
                fullName:{
                    //get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候会被调用？1.当初次读取fullName时。2.所依赖的数据发生变化时
                    get(){
                        return this.firstName+'-'+this.lastName
                    },
                    set(val){   
                        //setter什么时候调用，当fullName被修改时
                        const arr = val.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }*/
            }
        })
    </script>
</body>
</html>